<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar>
      <template #left>
        <span class="iconfont iconnew index-new"></span>
      </template>
      <template #title>
        <div class="index-header-search">
          <van-icon name="search" color="#fff" size="20" />
          搜索商品
        </div>
      </template>

      <template #right>
        <van-icon
          name="manager-o"
          color="#fff"
          size="25"
          @click="$router.push('./personal')"
        />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <van-tabs @change="getCategoryData" v-model="curIndex">
      <van-tab v-for="item in categoryList" :title="item.name" :key="item.id">
        <!-- 
                    新闻有三种类型的展示方式：
                    1、左右结构
                    2、上下结构，上面试标题，下面是3张图片
                    3、上下结构，上标题，下面是视频
                 -->

        <!-- 上拉刷新 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check='false'
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- 下拉刷新数据 -->
          <!-- @click.native使用此修饰符也可以用原生 -->
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <hmArticleItem
              v-for="item in newsList"
              :key="item.id"
              :obj="item"
              @click.native="objNews(item.id)"
            ></hmArticleItem>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import hmArticleItem from "@/components/hmArticleItem.vue";
import { category, post } from "@/apis/index.js";
export default {
  components: { hmArticleItem },
  //导航栏
  async created() {
    let res = await category();
    console.log(43,res);
    //新闻栏
    this.categoryList = res.data.data;
    // console.log(46,this.categoryList);
    post({
      category: this.categoryList[this.curIndex].id,
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
    }).then((res) => {
      // console.log(47,res);
      this.newsList = res.data.data;
    });
  },
  data() {
    return {
      categoryList: [],
      newsList: [],
      curIndex: localStorage.getItem('heima-token')?1:0, //当前栏目下标值
      isLoading: false, //下拉刷新状态
      loading: false, //上拉加载的状态
      finished: false, //上拉的最后状态
      //分页相关
      pageIndex: 1, //请求数据的页数
      pageSize: 10, //请求一页的新闻数量
    };
  },
  methods: {
    //tab栏切换事件
    getCategoryData(name, title) {
      //name是下标，title是标题
      console.log(name, title);
      this.curIndex = name;
      this.newsList = [],
      this.pageIndex =1
      this.finished=false
      this.getNews();
    },
    //下拉事件
    onRefresh() {
      this.newsList=[]
      //数据库数据更新才
      this.pageIndex =1
      this.finished = false
      this.getNews();
    },
    // 获取新闻事件
    getNews() {
      post({
        category: this.categoryList[this.curIndex].id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.data.data.length < this.pageSize) {
          this.finished = true;
        }
        // if(this.isLoading ===true){this.newsList = [...res.data.data, ...this.newsList];console.log('下拉了');}
        // if(this.loading ===true){this.newsList = [...this.newsList, ...res.data.data];console.log('上拉了');}
        // else{       
        //     this.newsList = res.data.data
        // }
        
        this.isLoading = false;
        this.loading = false;

        this.newsList = [...this.newsList, ...res.data.data]
      });
    },
    // 上拉事件
    onLoad(){
        this.loading = true,
        this.pageIndex++
        this.getNews()
    },
    objNews(id){
      this.$router.push({
        path:'/newsDetail',
        query:{id}
      })
    }
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: red;
}
.index-new {
  font-size: 50px;
  color: #fff;
}
/deep/.van-nav-bar__title {
  width: 60%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 35px;
  color: #fff;
  height: 38px;
  line-height: 38px;
}
// 新闻列表布局
.single {
  padding: 15px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    .content {
      font-size: 14px;
      padding: 0px 5px;
      line-height: 24px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .info {
    font-size: 12px;
    padding-left: 5px;
    color: #999;
    > span:nth-of-type(1) {
      padding-right: 15px;
    }
  }
  img {
    width: 120/360 * 100vw;
    height: 70/360 * 100vw;
    object-fit: cover;
    padding-right: 5px;
  }
}
</style>
